<template>
    <div class="bigHigh_box">
        <TopOne :obj="obj" :getYao="getYao" :datalist="datalist" />
        <div class="customTodo_body">
            <TopTwo :todoButton="todoButton" />
            <Table :columns="columns" :data="store.tableDataSix" @change="onChange"   :operate="operate" class="tableS">
      </Table>
        </div>
  
  
  
  
  
  
  
  
  
        <!-- 导出的弹框 -->
  
  <el-dialog
    v-model="dialogVisible"
    title="导出"
    width="500"
    :before-close="handleClose"
    modal="false"
    draggable="true"
  >
    
  <p class="box_center">
    <el-button type="primary"  size="large" @click="deduced"  class="btn">下载导出文件</el-button>
    <el-button  size="large"  class="btn"  >导出文件管理</el-button>
  </p>
    <template #footer>
      <div class="dialog-footer">
        <!-- <el-button @click="dialogVisible = false">Cancel</el-button> -->
        <!-- <el-button type="primary" @click="dialogVisible = false">
          Confirm
        </el-button> -->
      </div>
    </template>
  </el-dialog>
  
  
  
  
  
  
  <!-- 导入的弹框 -->
  
  
  
  
  <!-- <el-upload
      action=""
      :auto-upload="false"
      :on-change="uploadChange"
      :limit="1"
    >
      <el-button type="primary">上传Excel</el-button>
    </el-upload> -->
  
  
  
  <el-dialog
    v-model="dialogVisible1"
    title="导入"
    width="600"
    modal="false"
    draggable="true"
    :before-close="handleClose"
  >
  
  
  <div class="Box_file">
    <div class="user_logo"></div>
    <div>
        <p class="upload">上传填好的信息表</p>
    <p class="content">文件后缀名必须为xls 或xlsx (即Excel格式),文件大小不得大于10M,最多支持导入3000条数据</p>
    <p class="btnS">
        <el-upload
      action=""
      :auto-upload="false"
      :on-change="uploadChange"
      :limit="1"
    >
      <button>上传Excel</button>
    </el-upload>
    </p>
    </div>
  
  
   
  
  </div>
  <div class="tips">
    <span class="iconfont" id="logo">&#xe63f;</span>
    <div>
      <p class="ttt">特别提示</p>
      <p class="ytt">导入过程中如发现同名客户，且对该客户数据有更新权限，则更新这条客户数据</p>
    </div>
  </div>
  
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogVisible1 = false">取消</el-button>
        <el-button type="primary" @click="dialogVisible1 = false">
          确定
        </el-button>
      </div>
    </template>
  </el-dialog>
  
  
  
  
  
  
  
  <!-- 添加弹框 -->
  
  <el-dialog
    v-model="dialogVisible2"
    title="发起工单"
    width="500"
    :before-close="handleClose"
  >
    <div class="box_inp">
      <p>工单编号:
        <el-input v-model="input" style="width: 240px" placeholder="输入工单编号" />
      </p>
      <p>工单标题:
        <el-input v-model="input1" style="width: 240px" placeholder="输入工单标题" />
      </p>
      <p>工单类型:
        <el-input v-model="input2" style="width: 240px" placeholder="输入工单类型" />
      </p>
      <p>处理人员:
        <el-input v-model="input3" style="width: 240px" placeholder="输入处理人员" />
      </p>
      <p>发起时间:
        <el-input v-model="input4" style="width: 240px" placeholder="输入发起时间" />
      </p>
      <p>工单状态:
        <el-input v-model="input5" style="width: 240px" placeholder="输入工单状态" />
      </p>
      <p>紧急程度:
        <el-input v-model="input6" style="width: 240px" placeholder="输入紧急程度" />
      </p>
      <p>批注:
        <el-input v-model="input7" style="width: 240px" placeholder="输入备注" />
      </p>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogVisible2 = false">取消</el-button>
        <el-button type="primary" @click="addS">
          确定
        </el-button>
      </div>
    </template>
  </el-dialog>
  
  
  
  
  
  
  
  
  
    </div>
  </template>
  
  <script setup lang="ts">
  import TopOne from '../../components/topOne.vue'
  import TopTwo from '../../components/topTwo.vue';
  import Table from "@/components/newTable.vue"
  import { ElMessageBox } from 'element-plus'
  import axios from 'axios';
  import type { TableColumnType } from 'ant-design-vue';
  import {useStore} from "../../store/index.ts"
  import { onMounted, ref,computed } from 'vue';
  import * as XLSX from 'xlsx' // Vue3 版本
  import { useRouter } from 'vue-router';
  // import {useRouter} from 'vue-router'
  // 传给第一个input框的数据
  
  
  
  const input=ref('')
  const input1=ref('')
  const input2=ref('')
  const input3=ref('')
  const input4=ref('')
  const input5=ref('')
  const input6=ref('')
  const input7=ref('')
  
  
  
  
  
  const router=useRouter()
  
  
  
  const operate = ref([
      {
          icon: '',           
          title: '详情',
          click: (_key: any) => {detailOne(_key) }
      },
      {
          icon: '',
          title: '删除',
          // 括号中的为整列信息 可以切换成别的
          click: (_key: any) => {delOne(_key) }
      }
  ])
  
  
  const delOne=(key)=>{
     axios.delete(`http://localhost:8080/ticket/${key.id}`)
    // console.log(key)
     store.getTicketS()
  }
  
  
  
  const detailOne=(key)=>{
    router.push({path:'/home/ticket/detail',query:key})
  }
  
  
  
  const dialogVisible = ref(false)
  const dialogVisible1 = ref(false)
  const dialogVisible2 = ref(false)
  const dialogVisible3 = ref(false)
  
  
  
  const addS=()=>{
  console.log("11")
  dialogVisible2.value = false
  
  axios.post("http://localhost:8080/ticket",
  {workNum:input.value,workTit:input1.value,
    workType:input2.value,subPerson:input3.value,
    subTime:input4.value,current_status:input5.value,
    urgent:input6.value,key:input7.value
  })
  store.getTicketS()
  }
  
  
  
  
  const readFile = (file: any) => {
  return new Promise((resolve) => {
    let reader = new FileReader();
    reader.readAsBinaryString(file);
    reader.onload = (ev) => {
      resolve(ev.target?.result);
    };
  });
  };
  const uploadChange = async (file: any) => {
  let dataBinary = await readFile(file.raw);
  let workBook = XLSX.read(dataBinary, { type: "binary", cellDates: true });
  let workSheet = workBook.Sheets[workBook.SheetNames[0]];
  const data = XLSX.utils.sheet_to_json(workSheet);
  console.log("excel数据", data);
  };
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  const store=useStore()
  
  onMounted(()=>{
  store.getTicketS()
  })
  
  
  
  
  
  const columns = computed<TableColumnType[]>(() => {
  return [
  
    {
      title: '工单编号',
      dataIndex: 'workNum',
      key: 'workNum',
    },{
      title: '工单标题',
      dataIndex: 'workTit',
      key: 'workTit',
    },{
      title: '工单类型',
      dataIndex: 'workType',
      key: 'workType',
    },{
      title: '处理人员',
      dataIndex: 'subPerson',
      key: 'subPerson',
    },{
      title: '提交时间',
      dataIndex: 'subTime',
      key: 'subTime',
    },{
      title: '审批状态',
      dataIndex: 'current_status',
      key: 'current_status',
    },{
      title: '紧急程度',
      dataIndex: 'urgent',
      key: 'urgent',
    },{
      title: '操作',
      dataIndex: 'differenceInDays',
      key: 'differenceInDays',
      width: '15%',
    }
  ];
  });
  
  
  
  
  
  const handleClose = (done: () => void) => {
  ElMessageBox.confirm('确定取消吗？')
    .then(() => {
      done()
    })
    .catch(() => {
      // catch error
    })
  }
  
  
  
  
  
  
  
  
  
  const obj = {
    // 第一个输入框
    inputOne: {
        done: true,
        tishi: '搜索关键词',
    },
    // 后面倒数第二个带小人的输入框
    inputTwo: {
        done: true,
        tishi: "提交人员"
    },
    // 日历输入框
    inputThere: {
        done: true,
        tishi: '提交时间'
    },
    // 3个下拉列表
    selectOne: {
        done: true,
        tishi: '审批状态',
        todoDone: [
            {
                value: '已通过',
                label: '已通过',
            },
            {
                value: '待审批',
                label: '待审批',
            }
        ]
    },
    selectTwo: {
        done: true,
        tishi: '请假类型',
        todoDone: [
            {
                value: '事假',
                label: '事假',
            },
            {
                value: '病假',
                label: '病假',
            },
  
        ]
    },
    selectThere: {
        done: false,
        tishi: '客户星级',
        todoDone: [
            {
                label: '⭐',
                value: '1',
            },
            {
                label: '⭐⭐',
                value: '2',
            },
            {
                label: '⭐⭐⭐',
                value: '3',
            },
        ]
    }
  }
  // 获取到input的数据
  function getYao(value: any) {
    if (value.inputOne) {
        tableData.value = tableData.value.filter((item: any) => {
            if (item.iSwhy.indexOf(value.inputOne) != -1) {
                return item
            }
        })
        
    }
    if (value.selectOne) {
        tableData.value = tableData.value.filter((item: any) => {
            if (item.done.indexOf(value.selectOne) != -1) {
                return item
            }
        })
    }
    console.log(value, '头部请求获取到的');
  }
  // 传给一排按钮的数据+方法
  const todoButton = [
    { id: 1, name: '➕︎添加', fn: addOne },
    { id: 2, name: '⬇导入', fn: daoruAlert},
    { id: 3, name: '⬆导出' , fn:deducedAlert},
    // {id:4,name:'🗊新建任务'},
    // {id:5,name:'🗘转移客户'},
    // {id:6,name:'🕴移入公海'},
    // {id:7,name:'⛙合并客户'},
    // {id:8,name:'🖊︎批量编辑'},
  ]
  // 给按钮绑定事件
  function addOne() {
  dialogVisible2.value=true
    console.log("添加");
  }
  
  function daoruAlert(){
    dialogVisible1.value= true
  }
  
  
  
  
  function deducedAlert(){
    dialogVisible.value = true
  
  }
  
  
  function deduced(){
    dialogVisible.value = false
    const data = XLSX.utils.json_to_sheet(store.tableDataSix)
  // 创建工作簿
  const wb = XLSX.utils.book_new()
  // 将工作表放入工作簿中
  XLSX.utils.book_append_sheet(wb, data, 'data')
  // 生成文件并下载
  XLSX.writeFile(wb, 'test.xlsx')
  console.log('完成导出')
  }
  
  
  
  
  
  
  
  </script>
  
  <style scoped>
  .tableS{
    width:100%;
  }
  .ttt{
    font-size: 14px;
    color: black;
  }
  .ytt{
    color: rgb(153, 153, 153);
    font-size: 12px;
  }
  #logo>p{
    line-height: 30px;
  }
  #logo{
    font-size: 36px;
  }
  .tips{
    display: flex;
    justify-content:space-evenly;
    align-items: center;
    width: 560px;
    height: 60px;
    background-color: rgb(255, 245, 230);
    margin-top: 15px;
  }
  .box_inp>p{
  margin-top: 10px;
  }
  .btnS{
   margin-left: 8px;
   margin-top: 12px;
  }
  .content{
    color: gray;
    font-size: 10px;
    margin-left: 8px;
    margin-top: 12px;
  }
  .upload{
    font-weight: bold;
    margin-left: 8px;
    margin-top: 12px;
  }
  .user_logo{
    width:110px;
    height: 100px;
    background-color: gray;
  }
  .Box_file{
    width: 580px;
    height: 100px;
    background-color: white;
    display: flex;
  }
  .btn{
    width: 180px;
  }
  *{
    padding: 0;
    margin: 0;
    list-style-type: none;
  }
  .box_center{
    text-align: center;
    margin-top:40px;
  }
  </style>